<template>
  <div class="inner">
    <div class="summary-desc" :class="{ hovered: hoverNow }">
      <div class="h-items">
        <div
          class="h-item x-r y-h"
          style="left: -0%; animation-delay: 0.3s"
          @mouseover="hoverNow = true"
          @mouseleave="hoverNow = false"
        >
          <div class="inner">
            <div class="h-title">建台</div>
            <div class="h-desc"></div>
            <div class="h-date"><span>2015.10.28</span></div>
          </div>
        </div>
        <div
          class="h-item x-r y-l"
          style="left: 2%; animation-delay: 0.36s"
          @mouseover="hoverNow = true"
          @mouseleave="hoverNow = false"
        >
          <div class="inner">
            <div class="h-title">
              <span class="mobile-hide">入选</span>年度精选
            </div>
            <div class="h-desc"></div>
            <div class="h-date"><span>2015.12.15</span></div>
          </div>
        </div>
        <div
          class="h-item x-l y-h"
          style="left: 16%; animation-delay: 0.42s"
          @mouseover="hoverNow = true"
          @mouseleave="hoverNow = false"
        >
          <div class="inner">
            <div class="h-title">
              一岁<span class="mobile-hide">生日趴</span>
            </div>
            <div class="h-desc"></div>
            <div class="h-date"><span>2016.10.28</span></div>
          </div>
        </div>
        <div
          class="h-item x-r y-l"
          style="left: 21%; animation-delay: 0.48s"
          @mouseover="hoverNow = true"
          @mouseleave="hoverNow = false"
        >
          <div class="inner">
            <div class="h-title">Anyway.Post</div>
            <div class="h-desc"></div>
            <div class="h-date"><span>2017.2.14</span></div>
          </div>
        </div>
        <div
          class="h-item x-l y-h"
          style="left: 32%; animation-delay: 0.54s"
          @mouseover="hoverNow = true"
          @mouseleave="hoverNow = false"
        >
          <div class="inner">
            <div class="h-title">
              两岁<span class="mobile-hide">生日趴</span>
            </div>
            <div class="h-desc"></div>
            <div class="h-date"><span>2017.10.28</span></div>
          </div>
        </div>
        <div
          class="h-item x-r y-l"
          style="left: 37%; animation-delay: 0.6s"
          @mouseover="hoverNow = true"
          @mouseleave="hoverNow = false"
        >
          <div class="inner">
            <div class="h-title">年度总结</div>
            <div class="h-desc"></div>
            <div class="h-date"><span>2018.2.14</span></div>
          </div>
        </div>
        <div
          class="h-item x-r y-l"
          style="left: 48%; animation-delay: 0.66s"
          @mouseover="hoverNow = true"
          @mouseleave="hoverNow = false"
        >
          <div class="inner">
            <div class="h-title">会员计划</div>
            <div class="h-desc"></div>
            <div class="h-date"><span>2018.10.28</span></div>
          </div>
        </div>
        <div
          class="h-item x-r y-h"
          style="left: 54%; animation-delay: 0.72s"
          @mouseover="hoverNow = true"
          @mouseleave="hoverNow = false"
        >
          <div class="inner">
            <div class="h-title">
              <span class="mobile-hide">Anyway.</span>TV
            </div>
            <div class="h-desc"></div>
            <div class="h-date"><span>2019.3.11</span></div>
          </div>
        </div>
        <div
          class="h-item x-r y-l"
          style="left: 57%; animation-delay: 0.78s"
          @mouseover="hoverNow = true"
          @mouseleave="hoverNow = false"
        >
          <div class="inner">
            <div class="h-title">
              催更功能<span class="mobile-hide">上线</span>
            </div>
            <div class="h-desc"></div>
            <div class="h-date"><span>2019.5.16</span></div>
          </div>
        </div>
        <div
          class="h-item x-r y-h"
          style="left: 69%; animation-delay: 0.84s"
          @mouseover="hoverNow = true"
          @mouseleave="hoverNow = false"
        >
          <div class="inner">
            <div class="h-title">Anyway.News</div>
            <div class="h-desc"></div>
            <div class="h-date"><span>2020.2.11</span></div>
          </div>
        </div>
        <div
          class="h-item x-r y-l"
          style="left: 80%; animation-delay: 0.9s"
          @mouseover="hoverNow = true"
          @mouseleave="hoverNow = false"
        >
          <div class="inner">
            <div class="h-title">会员计划升级</div>
            <div class="h-desc"></div>
            <div class="h-date"><span>2020.10.28</span></div>
          </div>
        </div>
      </div>
      <div class="h-axis"></div>
      <div class="h-bottom">
        <div class="h-year" style="left: 3%; animation-delay: 0.48s">
          <div class="h-year-title">2016</div>
        </div>
        <div class="h-year" style="left: 19%; animation-delay: 0.48s">
          <div class="h-year-title">2017</div>
        </div>
        <div class="h-year" style="left: 35%; animation-delay: 0.6s">
          <div class="h-year-title">2018</div>
        </div>
        <div class="h-year" style="left: 51%; animation-delay: 0.72s">
          <div class="h-year-title">2019</div>
        </div>
        <div class="h-year" style="left: 67%; animation-delay: 0.84s">
          <div class="h-year-title">2020</div>
        </div>
        <div class="h-year" style="left: 83%; animation-delay: 0.96s">
          <div class="h-year-title">2021</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script src="./time_line.js">
</script>

<style lang="less" scoped>
@import "./time_line.less";
</style>
